<template>
<!--  这是修改容器cpu参数，这边要大改，这个中英翻译先略过-->
  <div>
    <el-form ref="form" :model="form" size="small" label-width="150px">
      <el-form-item label="CpuPeriod">
        <el-input v-model.number="form.CpuPeriod" type="number" style="width: 50%;"></el-input>
        <span class="tishi">CPU周期，单位：微秒</span>
      </el-form-item>
      <el-form-item label="CpuQuota">
        <el-input v-model.number="form.CpuQuota" type="number" style="width: 50%;"></el-input>
        <span class="tishi">容器在CPU周期长度内获得的使用时间，单位：微秒</span>
      </el-form-item>
      <el-form-item label="CpuRealtimePeriod">
        <el-input v-model.number="form.CpuRealtimePeriod" type="number" style="width: 50%;"></el-input>
        <span class="tishi">CPU实时周期，单位：微秒</span>
      </el-form-item>
      <el-form-item label="CpuRealtimeRuntime">
        <el-input v-model.number="form.CpuRealtimeRuntime" type="number" style="width: 50%;"></el-input>
        <span class="tishi">CPU实时运行时长，单位：微秒</span>
      </el-form-item>
      <el-form-item label="NanoCPUs">
        <el-input v-model.number="form.NanoCPUs" type="number" style="width: 50%;"></el-input>
        <span class="tishi">CPU配额，以10的负9次方个CPU为单位</span>
      </el-form-item>
      <el-form-item label="CpuCount">
        <el-input v-model.number="form.CpuCount" type="number" style="width: 50%;"></el-input>
        <span class="tishi">可用CPU数量，仅windows</span>
      </el-form-item>
      <el-form-item label="CpuPercent">
        <el-input v-model.number="form.CpuPercent" type="number" max="100" style="width: 50%;"></el-input>
        <span class="tishi">可用CPU的可用百分比，仅windows</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        CpuPeriod: null,
        CpuQuota: null,
        CpuRealtimePeriod: null,
        CpuRealtimeRuntime: null,
        NanoCPUs: null,
        CpuCount: null,
        CpuPercent: null
      }
    }
  },
  watch: {
    // 数据回填
    item: function () {
      if (this.item) {
        this.form.CpuPeriod = this.item.HostConfig.CpuPeriod
        this.form.CpuQuota = this.item.HostConfig.CpuQuota
        this.form.CpuRealtimePeriod = this.item.HostConfig.CpuRealtimePeriod
        this.form.CpuRealtimeRuntime = this.item.HostConfig.CpuRealtimeRuntime
        this.form.NanoCPUs = this.item.HostConfig.NanoCpus
        this.form.CpuCount = this.item.HostConfig.CpuCount
        this.form.CpuPercent = this.item.HostConfig.CpuPercent
      }
    },
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$emit('data', ['Cpu', this.form])
      }
    }
  },
  props: ['item']
}
</script>

<style lang="scss" scoped>
.tishi{
  font-size: 12px;
  color: #ccc;
  padding-left: 10px;
}
</style>
